<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>历史订单导出列表</span>
      <div>
        <el-button @click="refresh" icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="tableBox">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column prop="createTime" align="center" label="导出时间"></el-table-column>
          <el-table-column prop="userName" align="center" label="用户名">
              <template slot-scope="scope">
                <span v-if="scope.row.rolesId == '1'">{{scope.row.userName}}(超级管理员)</span>
                <span v-else-if="scope.row.rolesId == '2'">{{scope.row.userName}}(一级服务商)</span>
                <span v-else-if="scope.row.rolesId == '3'">{{scope.row.userName}}(二级服务商)</span>
                <span v-else-if="scope.row.rolesId == '4'">{{scope.row.userName}}(业务经理)</span>
                <span v-else-if="scope.row.rolesId == '5'">{{scope.row.userName}}(商户)</span>
                <span v-else-if="scope.row.rolesId == '6'">{{scope.row.userName}}(门店)</span>
                <span v-else-if="scope.row.rolesId == '7'">{{scope.row.userName}}(终端)</span>
                <span v-else-if="scope.row.rolesId == '8'">{{scope.row.userName}}(运营)</span>
                <span v-else-if="scope.row.rolesId == '9'">{{scope.row.userName}}(财务)</span>
                </template>
          </el-table-column>
          <el-table-column prop="startTime" align="center" label="起始时间"></el-table-column>
          <el-table-column prop="endTime" align="center" label="结束时间"></el-table-column>
          <el-table-column prop="exportStatus" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.exportStatus == '1'">进行中</span>
              <span v-else-if="scope.row.exportStatus == '2'">完成</span>
              <span v-else-if="scope.row.exportStatus == '3'">失败({{scope.row.exportMsg}})</span>
              <span v-else-if="scope.row.exportStatus == '99'">删除</span>
            </template>
          </el-table-column>
          
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" v-if="scope.row.exportStatus == 2" @click="download(scope.row.exportUrl)">下载</el-button>
              <el-button type="text" size="small" style="color:red" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-sizes="[10,20,30,40,50]"
            :page-size="cur_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          ></el-pagination>
        </div>
        <div class="notice-tip">* 仅提供72小时内导出记录查询，超过72小时的导出文件将被系统自动删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import { exportRecordlisthis,exportRecorddeletehis } from "@/api/api";
export default {
  name: "item-one",
  data: function() {
    return {
      loading: false,
      isDisable: false,
      ctime:[],
      cur_page: 1,
      cur_size: 10,
      total1: 0,
      multipleSelection: [],
      restaurants: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
    };
  },
  filters:{
    formatStata(status) {
      var time_str= status;
		  var status = time_str.substr(0,10);
      return status;
    },
  },
  created() {
      this.exportRecordlist()
  },
  activated(){
    this.exportRecordlist()
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.exportRecordlist();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.exportRecordlist();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 商户列表
    exportRecordlist() {
      this.loading = true
      this.isDisable = true
      exportRecordlisthis({
          page: this.cur_page,
          size: this.cur_size,
      }).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        } else {
          console.log(res.data)
          if(res.data.code == 200){
            this.isDisable = false
            this.loading = false
            if(res.data.data !== []){
              console.log(res)
              this.merchantarr = res.data.data.rows;
              this.total1 = res.data.data.total;
              this.pageCount = res.data.data.currPage;
            }
          }else{
            this.isDisable = false
            this.loading = false
            this.$message.error(res.data.message);
          }
        }
      });
    },
    download(url){
        let elink = document.createElement('a');
        elink.download = "订单列表.xls";
        elink.href = url;
        elink.click();
    },
    del(id){
        this.$confirm('是否确定删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            exportRecorddeletehis({},id).then(res => {
            if (res.code == 405) {
                sessionStorage. removeItem("token");
                this.$router.push("/login");
                }else if(res.code == 200){
                    this.$message({
                    message: '已删除',
                    type: 'success'
                });
                this.exportRecordlist()
                }else{
                    this.$message.error(res.message);
                }
            })
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消'
            });          
        });
        
    },
    refresh(){
      this.exportRecordlist()
    }
  }
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 40%;
  padding: 0 35px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.inline-input{
  width: 350px;;
}
.width60{
  width: 50%;
}
.notice-tip{
  color: red;
  font-size: 8px;
  text-align: center;
}
</style>